<template>
  <div class="app-container">
    <el-form ref="form" :model="form" :rules="rules" label-width="160px">
      <el-form-item label="标签名称："  prop="name">
        <el-input type="text" v-model="form.name"/>
      </el-form-item>
      <el-form-item label="是否禁用">
        <el-radio-group v-model="form.enable" size="small">
          <el-radio :label="true" border>是</el-radio>
          <el-radio :label="false" border>否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button @click="onCancel">取消</el-button>
        <el-button type="primary" :loading="loading"  @click="onSubmit">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import { edit,detail } from '@/api/tag'
  import { getToken } from '@/utils/auth'
  import {showDecimal} from '@/utils'
  export default {
    data() {
      return {
        loading:false,
        id:0,
        form: {
          enable:false,
          managerId:0,
          name:'',
          token:getToken(),
        },
        rules:{
          name: [
            { required: true, message: '请输入名称', trigger: 'blur' },
          ],
        }
      }
    },
    methods: {
      getDetails(){
          detail({targetId:this.$route.query.id}).then((json) => {
            if(json.status === 200){
               this.form.name=json.data.name;
               this.form.enable=json.data.enable;
               this.form.tagsId=json.data.id;
              }else{
                this.$message.error(json.data.message);
              }
          });
        },
      onSubmit() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.loading=true
            let data=JSON.parse(JSON.stringify(this.form))
            edit(data).then(res=>{
              this.$message.success('添加(编辑)成功')
              this.onCancel()
            }).finally(()=>{
              this.loading=false
            })
          }
        });
      },
      onCancel() {
        this.$router.go(-1)
      }
    },
    created() {
      this.form.managerId=this.$route.query.managerId;
      if(this.$route.query.id){
        this.getDetails();
      } 
    }
  }
</script>

<style lang="scss" scoped>
  .app-container{
    width: 500px;
  }
  .line{
    text-align: center;
  }
</style>

